<template>
    <div class="detail">
        <div class="detail-source">
            <div class="image-source">
                <img src="../assets/img/business01.jpg" alt="商业" class="images">
            </div>
            <!-- <div class="video-source">
                <video  width="658" height="444" src="../assets/video/mountain.mp4"  autoplay></video >
            </div> -->
        </div>
        <div class="detail-info">
            <div class="information">
                <p class="title">
                    <span>{{informationInfo.title}}</span>
                    <span class="interval"></span>
                    <span><i class="el-icon-view"></i>:</span> <span>{{informationInfo.viewsCount}}</span>
                    <span class="interval"></span>
                    <span><i class="el-icon-download"></i>:</span> <span>{{informationInfo.download}}</span>
                </p>
                <div class="content">
                    <p>
                        <span>资源ID: {{informationInfo.sourceId}}</span>
                        <span>上传人: {{informationInfo.uploader}}</span>
                    </p>
                    <p>
                        <span>资源类型: {{informationInfo.sourceType}}</span>
                        <span>资源所属行业: {{informationInfo.sourceIndustry}}</span>
                        <span>资源解决方案: {{informationInfo.sourceSolution}}</span>
                    </p> 
                    <p>
                        <span class="video-type">视频时长: {{informationInfo.videoDuration}}</span>
                        <!-- <span class="ppt-type">页数: 21</span> -->
                        <span>横纵比率: {{informationInfo.videoRatio}}</span>
                    </p>                                       
                </div>
                <div class="description">
                    <div class="description-left">资源描述:</div>
                    <div  class="description-right">
                        <p>{{informationInfo.sourceDescription}}</p>
                    </div>
                </div>
                <div class="description">
                    <div class="description-left">关键词:</div>
                    <div  class="description-right">
                        <span v-for="(item,index) in informationInfo.keywordsInfo" class="el-tags">
                            <el-tag>{{item}}</el-tag>
                        </span>
                    </div>
                </div>
                <!-- 不同场景
                <div>
                    <p class="experience"> 
                        <el-button type="primary" plain style="width: 150px;">在线体验</el-button>                   
                        <el-button type="primary" style="margin-left:50px;width: 150px;">购买</el-button>
                    </p>                    
                </div>                 -->
            </div>
            <div class="empower-info">
                <p class="info-content"><span>授权选择</span></p>
                <p class="info-content">
                    <span v-for="(item,index) in informationInfo.radioList" class="radioList">
                        <el-radio v-model="informationInfo.radio" :label="item">{{item}}</el-radio>
                    </span>
                </p>
                <p class="purchase">
                    <el-button type="primary" style="width: 150px;">购买并下载</el-button>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
	import getToplistsData from '@/api/getToplistsData'
	import Loading from '@/components/Loading'
	export default {
		components:{
			Loading
		},
		data(){
			return {
				informationInfo:{
                    title:'智慧城市概念视频',
                    viewsCount: 45,
                    download: 16,
                    sourceId:'10024',
                    uploader:'张三',
                    sourceType:'视频',
                    sourceIndustry:'互联网',
                    sourceSolution:'其它',
                    videoDuration:'00:23:25',
                    videoRatio:'16:9',
                    sourceDescription:'资源为智慧城市概念视频，展示出智慧城市的样貌，适用于智慧城市相关的文档、解决方案等',
                    keywordsInfo: ['智慧城市','物联网','大数据','云'],
                    radio: '标椎',
                    radioList: ['标椎', 'JPEG', '6000 × 4000px (300dpi)', '6.1MB']
                }
			}
		},
		created(){
			this._getToplistsData();
		},
		methods:{
			_getToplistsData(){
				getToplistsData().then((res)=>{
					this.toplists=res.data.topList
				})
			},
			goTo(place,id){
				let url=`/${place}/${id}`
				this.$router.push(url)
			}
		}
	}
</script>
<style scoped>
    .detail{
        width: 80%;
        background: #f7f7f7;
        margin: 50px auto;
        height: 900px;
    }
    .title{
        margin: 15px 0;
        font-size: 21px;
        font-weight: 600;
        color: #615f5f;
    }
    .detail-source{
        width: 45%;
        float: left;
    }
    .detail-info{
        width: 55%;
        height: 650px;
        float: left;
    }
    .images{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
		transform: scale(0.9);
		-ms-transform:scale(0.9);     /* IE 9 */
		-moz-transform:scale(0.9);     /* Firefox */
		-webkit-transform:scale(0.9); /* Safari 和 Chrome */
		-o-transform:scale(0.9);	
    }
    .information{
        margin: 24px auto;
        background: #fff;
        width: 95%;
        padding: 25px;
    }
    .empower-info{
        color: #9b9b9b;
        font-size: 15px;   
        margin: 40px auto;
        background: #fff;
        width: 95%;
        padding: 1px 15px;         
    }
    .empower-info .info-content{
        margin: 30px 10px
    }       
    .interval{
        margin-left: 20px;
    }
    .content>p{
        display: flex;
        justify-content: flex-start;
        color: #9b9b9b;
        font-size: 15px;
    }
    .content>p>span{
        width: 30%;
        line-height: 45px;
    }
    .description{
        margin: 15px 0;
        color: #9b9b9b;
        font-size: 15px;
    }
    .description-left{
        float: left;
        width: 15%;
    }
    .description-right{
        float: left;
        width: 60%;
    }
    .description:after,
    .description:before {
        content: "";
        display: block;
        clear: both;
    }  
    .el-tags{
        margin: 5px 15px;
    }
    .radioList{
        margin: 10px 35px;
    }
    .purchase{
        margin: 40px;
        text-align: center;
    }
    .experience{
        margin: 40px 0 0px 0;
        text-align: center;
    }
</style>
